<template>
	<view class="yb-flex" :id="customIdSync" :class="customClassSync"	:style="customStyleSync">
		<yb-tap :custom-class="{
			'yb-checkbox': true,
			'yb-flex-1': true,
			'yb-row': !cellable,
			'yb-align-center': !cellable
		}" :active="cellable ? 'mask' : 'opacity'" :custom-style="checkboxStyle" @tap="onClick" :disabled="disabled">
			<view class="yb-flex yb-align-center icon" :class="{
				'yb-row-reverse': cellable,
				'yb-justify-between': cellable,
				'yb-row': !cellable
			}" :style="{
				opacity: disabled ? 0.5 : 1
			}">
				<template v-if="focus">
					<slot name="focus">
						<yb-icon :name="optionsSync.shape == 'square' ? 'check-rect-fill' : 'check-circle-fill'" :size="optionsSync.size" :color="optionsSync.focus"></yb-icon>
					</slot>
				</template>
				<template v-else>
					<slot name="blur">
						<yb-icon :name="optionsSync.shape == 'square' ? 'check-rect-no' : 'check-circle-no'" :size="optionsSync.size" :color="optionsSync.color"></yb-icon>
					</slot>
				</template>
				<yb-text :style="{
					'margin-left': cellable ? 0 : '10rpx'
				}" v-if="labelSync.text.toString()" :value="labelSync.text" :color="labelSync.color" :size="labelSync.size"></yb-text>
			</view>
		</yb-tap>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	import Util from '../../js_sdk/util.js'
	export default {
		name: 'YbCheckbox',
		mixins: [ComponentMixin],
		props: {
			disabled: {
				type: Boolean,
				default: false
			},
			value: {
				type: [String,Number,Boolean],
				default: ''
			},
			label: {
				type: [Object,String],
				default: ''
			},
			//开启cell布局
			cellable: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			checkboxStyle () {
				return this.cellable ? {
					'background-color': this.optionsSync.bgColor,
					'padding-left': '40rpx',
					'padding-right': '40rpx',
					'padding-top': '30rpx',
					'padding-bottom': '30rpx',
					'border-radius': Util.pixelunit(this.optionsSync.radius)
				} : {}
			},
			optionsSync () {
				return Object.assign({}, {
					shape: 'circle',
					color: '#666',
					bgColor: '#fff',
					radius: 0,
					focus: '#007AFF',
					size: '40rpx'
				}, this.options)
			},
			labelSync () {
				return Object.assign({}, {
					text: '',
					color: '#333',
					size: '32rpx'
				}, Util.typeof(this.label) == 'Object' ? this.label : Util.typeof(this.label) == 'String' ? {text: this.label} : {})
			}
		},
		data () {
			return {
				focus: false
			}
		},
		mounted () {
			Util.typeof(this.value) == 'Boolean' ? this.focus = this.value : null
		},
		methods: {
			onClick () {
				if ( this.disabled ) {
					return
				}
				this.focus = !this.focus
				this.$emit('input', this.focus)
				this.$emit('change', this.focus)
				let parent = Util.getParent('YbCheckboxGroup', this);
				parent && parent.onChange(this.focus, this.value)
			},
			setValue (values) {
				this.focus = values.indexOf(this.value) > -1
			}
		},
		watch: {
			value (newVal) {
				Util.typeof(newVal) == 'Boolean' ? this.focus = newVal : null
			}
		}
	}
</script>

<style scoped>
</style>